<template>
    <div class="home-recommond">
         <div class="wrapper" ref="wrapper">
         <ul class="content" ref="content">
            <li v-for="(item,index) in listData" :key="index" @click="selectItem(item)">
                <div class="cover">
                    <van-image :src="item.cover" radius="1rem"/>
                    <span>{{item.listen_num | numFilter(1)}}万</span>
                </div>
                <span>{{item.title}}</span>
            </li>
        </ul>
    </div>
    </div>
</template>

<script>

import {betterScrollHorizontal} from '../../common/betterScroll.js'
export default {
    data(){
        return{
            listData:[]
        }
    },
    created(){
      this.getListData();
    },
    methods:{
        getListData(){
            this.$request("get",'/recommend/playlist/u')
            .then(res=>{
                console.log(res);
                if(res.result==100){
                    this.listData=res.data.list;
                }
              betterScrollHorizontal(this,this.$refs.wrapper,this.$refs.content,this.listData.length, 10)//调佣横向滚动的方法
            })
            
        },
        selectItem(item){
            const id = item.content_id;//获取到歌单的id
            // console.log(id);
            //1.命名的路由name，并加上参数，让路由建立url
            // this.$router.push({
            //     name:"singlist",
            //     params:{
            //         id:id //等同于id
            //     }
            // })
            //2.通过path手动建立url
            this.$router.push(`/singlist/${id}`)
        }

    
    },
    filters:{
        numFilter(value,num) {
            //把小数点固定为1位
            return parseFloat(value/10000).toFixed(num)
        }
    }
};
</script>

<style scoped>

/* .home-recommond ul{
    display: flex;
    flex-wrap: wrap;
    width: calc(10rem * 12);
}
 .home-recommond ul>li{
    width:calc((100% - 1rem) / 3 * 1);
    display: inline-block;
    width: 10rem;
}
.home-recommond ul>li:nth-of-type(3n+2){
margin-left: 0.5rem;
margin-right:0.5rem ;
} 

.home-recommond ul>li img{
    width: 90%;
    border-radius:1rem ;
}

 .van-image>img{
    width: 90%;
    border-radius:1rem;
    
}  */

.cover > span{
    position: absolute;
    right: 0.2rem;
    bottom: 0.4rem;
    background-color: rgb(189, 178, 178);
    color: white;
    font-size: 14px;
    border-radius: 1rem;
    width: 5rem;
    display: inline-block;
}
.cover{
    position: relative;
}
.wrapper{
    width: 100%;
    overflow: hidden;
}
/* ul.content{
    width: calc(10rem * 12);
} */
ul.content li{ 
     display: inline-block;
    width: 10rem;
    vertical-align: top;
}
ul.content li * { 
margin: 0.1rem;
}
ul.content li > span{
    font-size: 0.8rem;
    color: #54493b;
}
</style>